<template>
  <el-row>
    <el-col :span="8" style="padding-right: 10px">
      <el-card class="box-card">
        <div class="user">
          <img src="../assets/admin.png" alt="" style="width: 150px;height: 150px;">
          <div class="userinfo">
            <p class="name">{{ admin_user.username }}</p>
            <p class="access">{{ admin_user.formatted_role }}</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录：<span>{{ admin_user.formatted_login_time }}</span></p>
          <p>管理社区：<span>{{ admin_user.comm_name }}</span></p>
        </div>
      </el-card>
      <el-card class="table" style="margin-top: 20px;height: 460px;">
        <h3>新闻速览</h3>
        <div>{{ random_news.title }}</div>
        <div>{{ random_news.created_time }}</div>
        <el-card class="box-card random_news_content" style="margin-top: 20px;height: 330px">
          <div>
            <p v-html="this.random_news.content"></p>
          </div>
        </el-card>
      </el-card>
    </el-col>
    <el-col :span="16" style="padding-left: 10px">
      <el-card class="weatherAndClock">
        <div class="weather">
          <div id="he-plugin-standard" class="weather_component"></div>
        </div>
        <div class="time">
          <clock :time="time"></clock>
        </div>
      </el-card>

      <el-card style="height: 280px">
        <!-- 折线图 -->
        <div ref="echarts1" style="height: 280px"></div>
      </el-card>
      <div class="graph">
        <el-card style="height: 260px">
          <div ref="echarts2" style="height: 260px;"></div>
        </el-card>
        <el-card style="height: 260px">
          <div ref="echarts3" style="height: 240px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Clock from 'vue-clock2';
import * as echarts from "echarts";

export default {
  components: {Clock},
  name: "Main",

  data() {
    return {
      time: '10:40',
      admin_user: {},

      riskInComms: [],
      NFRatioToday: {},

      random_news: {},
    }
  },

  mounted() {

    window.setInterval(() => {
      setTimeout(this.getTime, 0)
    }, 1000)

    this.echarts1 = echarts.init(this.$refs.echarts1, null, {
      // width: 600
    })

    this.echarts2 = echarts.init(this.$refs.echarts2, null, {
      // width: 600
    })


    this.echarts3 = echarts.init(this.$refs.echarts3, null, {
      // width: 600
    })
    this.getRiskInComms()

    this.getResultsOfNF()

    this.getResultsOfNFRatioToday()


  },


  methods: {


    getNationalNewsRandom() {
      this.axios({
        method: "get",
        url: "/news/getNationalNewsRandom",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.random_news = resp.data.data
            var date = new Date(this.random_news.created_time);
            var formatted_time = `${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分`;
            this.random_news.created_time = formatted_time
            // console.log(resp.data.data)
          }
        }
      })
    },

    getTime() {
      let date = new Date()
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      this.time = h + ':' + m + ':' + s
    },

    getWeather() {
      window.WIDGET = {
        "CONFIG": {
          "layout": "1",
          "width": "760",
          "height": "150",
          "background": "2",
          "dataColor": "666666",
          "borderRadius": "5",
          "key": "49710d3f6b1b4d4490347dc45dd0179d"
        }

      };
      (function (d) {
        var c = d.createElement('link')
        c.rel = 'stylesheet'
        c.href = 'https://widget.qweather.net/standard/static/css/he-standard.css?v=2.0'
        var s = d.createElement('script')
        s.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"'
        var sn = d.getElementsByTagName('script')[0]
        sn.parentNode.insertBefore(s, sn)
        sn.parentNode.insertBefore(c, sn)
        sn.onload = () => {
          //自动宽度

          // document.getElementById("he-plugin-standard").style.display = "none";
          // setTimeout(() => {
          //   document.getElementById("he-plugin-standard").style.width = "100%";
          // }, 100);
        }
      })(document)


    },

    getWeather2() {
      window.WIDGET = {
        "CONFIG": {
          "layout": "1",
          "width": "760",
          "fontSize": "16",
          "height": "150",
          "background": "2",
          "dataColor": "666666",
          "borderRadius": "5",
          "key": "49710d3f6b1b4d4490347dc45dd0179d"
        }

      };
      (function (d) {
        var c = d.createElement('link');
        c.rel = 'stylesheet';
        c.href = 'static/css/he-weather.css';
        // c.href = 'https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0';
        var s = d.createElement('script');
        s.src = 'static/js/he-weather.js';
        // s.src = 'https://widget.heweather.net/simple/static/js/he-simple.js?v=1.4.0';
        var sn = d.getElementsByTagName('script')[0];
        sn.parentNode.insertBefore(c, sn);
        sn.parentNode.insertBefore(s, sn);
      })(document)
    },

    getResultsOfNFRatioToday() {
      this.axios({
        method: "get",
        url: "/echarts/getResultsOfNFRatioToday/",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.NFRatioToday = resp.data.data
            const eachrts3Option = {

              title: {
                text: '总核酸完成比例',

                textStyle: {//标题内容的样式
                  fontSize: 12//主题文字字体大小，默认为18px
                },

              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '5%',
                left: 'center'
              },
              series: [
                {
                  type: 'pie',
                  color: [
                    '#73a373',
                    '#ea7e53',
                  ],
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 10,
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value: this.NFRatioToday.numsOfNf, name: '已完成核酸检测'},
                    {value: this.NFRatioToday.numsOfUnNf, name: '未完成核酸检测'},
                  ]
                }
              ]
            }
            this.echarts3.setOption(eachrts3Option)
          }
        }
      })

    },


    getResultsOfNF() {
      this.axios({
        method: "get",
        url: "/echarts/getResultsOfNF/",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.ResultsOfNF = resp.data.data
            // console.log(this.riskInComms)
            var date = new Date()
            const echarts1Option = {
              title: {
                text: '核酸情况总览 ' + date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
              },


              legend: {
                // 图例文字颜色
                textStyle: {
                  color: "#333",
                },
              },
              grid: {
                left: "20%",
              },
              // 提示框
              tooltip: {
                trigger: "axis",
              },
              xAxis: {
                type: "category", // 类目轴
                data: this.ResultsOfNF.map(item => item.comm_name),
                axisLine: {
                  lineStyle: {
                    color: "#17b3a3",
                  },
                },
                axisLabel: {
                  interval: 0,
                  color: "#333",
                },
              },
              yAxis: [
                {
                  type: "value",
                  axisLine: {
                    lineStyle: {
                      color: "#17b3a3",
                    },
                  },
                },
              ],
              color: ["#2ec7c9", "#e3d27d"],
              series: [
                {
                  name: '阴性',
                  data: this.ResultsOfNF.map(item => item.result_0),
                  type: 'line'
                },
                {
                  name: '阳性',
                  data: this.ResultsOfNF.map(item => item.result_1),
                  type: 'line'
                }
              ],
            }
            this.echarts1.setOption(echarts1Option)


          }
        }
      })
    },

    getRiskInComms() {

      this.axios({
        method: "get",
        url: "/echarts/getAllRiskInComm/",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.riskInComms = resp.data.data
            // console.log(this.riskInComms)

            const eachrts2Option = {
              title: {
                text: '危险人员总览',

                textStyle: {//标题内容的样式
                  fontSize: 12//主题文字字体大小，默认为18px
                },

              },

              legend: {
                // 图例文字颜色
                textStyle: {
                  color: "#333",
                },
              },
              grid: {
                left: "20%",
              },
              // 提示框
              tooltip: {
                trigger: "axis",
              },
              xAxis: {
                type: "category", // 类目轴
                data: this.riskInComms.map(item => item.comm_name),
                axisLine: {
                  lineStyle: {
                    color: "#17b3a3",
                  },
                },

                axisLabel: {
                  interval: 0,
                  color: "#333",
                  rotate: 20
                },
              },
              yAxis: [
                {
                  type: "value",
                  axisLine: {
                    lineStyle: {
                      color: "#17b3a3",
                    },
                  },
                },
              ],
              color: ["#2ec7c9", "#e3d27d", "#f36161"],
              series: [
                {
                  name: '低风险',
                  data: this.riskInComms.map(item => item.risk_0),
                  type: 'bar'
                },
                {
                  name: '中风险',
                  data: this.riskInComms.map(item => item.risk_1),
                  type: 'bar'
                },
                {
                  name: '高风险',
                  data: this.riskInComms.map(item => item.risk_2),
                  type: 'bar'
                }
              ],
            }
            this.echarts2.setOption(eachrts2Option)


          }
        }
      })


    },

    getUserInfo() {
      this.admin_user = JSON.parse(sessionStorage.getItem("userinfo"))
      var formatted_role = []
      for (var role of this.admin_user.roles) {
        formatted_role.push(role.nameZh)
      }

      this.admin_user.formatted_role = formatted_role.join("，")

      var formatted_date = new Date(this.admin_user.login_time)
      this.admin_user.formatted_login_time = formatted_date.getFullYear() + "-" + (formatted_date.getMonth() + 1) + "-" + formatted_date.getDate() + " " + formatted_date.getHours() + ":" + formatted_date.getMinutes() + ":" + formatted_date.getSeconds()
      this.getCommunityByUid()
    },

    getCommunityByUid() {
      // var user = sessionStorage.getItem("userinfo")
      // user = JSON.parse(user)
      this.axios({
        method: "get",
        url: "/comm/getCommByCommAdmin",
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.admin_user.comm_name = resp.data.data.comm_name
          }
        }
      })

    }
    ,


  },

  created() {
    this.getWeather2()
    this.getUserInfo()
    this.getNationalNewsRandom()
  }

}
</script>


<style lang="less" scoped>
.user {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;

  img {
    margin-right: 40px;
    width: 150px;
    height: 150px;
    //border-radius: 0%;
  }

  .userinfo {
    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999999;
    }
  }
}

.login-info {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999999;

    span {
      color: #666666;
      margin-left: 60px;
    }
  }
}

.weatherAndClock {
  margin-bottom: 20px;
  height: 185px;
}

#he-plugin-standard {
  display: inline;
}


.num {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .icon {
    width: 80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: #fff;
  }

  .detail {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .price {
      font-size: 30px;
      margin-bottom: 10px;
      line-height: 30px;
      height: 30px;
    }

    .desc {
      font-size: 14px;
      color: #999;
      text-align: center;
    }
  }

  .el-card {
    width: 32%;
    margin-bottom: 20px;
  }
}

.graph {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .el-card {
    width: 48%;
  }
}


.time {
  display: inline-block;
  float: right;
  padding-right: 40px;
}

.weather {
  display: inline-block;
  padding-left: 20px;
  font-size: 18px !important;
}

.weather_component {
  font-size: 18px !important;
}

.random_news_content {

  overflow: auto;
}


</style>
